<template>
    <Layout>
        <Header>
          <div class="head_left">
            <h2><span class="pcShow">实验室管理系统</span></h2>
            <span class="phoneShow" @click="showMenu = !showMenu"> 
              <i class="ivu-icon ivu-icon-md-list"></i>
            </span>
          </div>
          <div class="head_right">
            <ul>
              <li>
                欢迎<span><i class="ivu-icon ivu-icon-ios-contact"></i></span>
                <router-link to="/admin/edituser">{{username}}</router-link>
              </li>
              <li @click="loginOut" class="loginOut">
                <span><i class="ivu-icon ivu-icon-ios-log-out"></i></span>退出登录
              </li>              
            </ul>
          </div>
        </Header>
        <Layout>
            <Sider>
              <Menu :active-name="activeName" theme="dark" width="auto" class="menu-item">
                  <MenuItem name="1-1" to="/admin/role" v-if="showRole">
                      <Icon type="ios-body" />
                      <span>角色管理</span>
                  </MenuItem>
                  <MenuItem name="1-2" to="/admin/user" v-if="showUser"> 
                      <Icon type="md-contacts" />
                      <span>用户管理</span>
                  </MenuItem>
                  <MenuItem name="1-3" to="/admin/equipment" v-if="showEquipment">
                      <Icon type="ios-construct" />
                      <span>器材管理</span>
                  </MenuItem>
                  <MenuItem name="1-4" to="/admin/material" v-if="showMaterial">
                      <Icon type="ios-flask" />
                      <span>材料管理</span>
                  </MenuItem>
                  <MenuItem name="1-5" to="/admin/experiment" v-if="showMemo">
                      <Icon type="ios-paper" />
                      <span>实验记录</span>
                  </MenuItem>
              </Menu>
            </Sider>
            <Content>
              <router-view/>
            </Content>
            <!-- 定义一个菜单栏 -->
            <div v-if="showMenu" class="showMenu subMenu">
              <Menu active-name="1-1" theme="dark" width="auto" class="menu-item">
                  <MenuItem name="1-1"  to="/admin/role" v-if="showRole">
                      <Icon type="ios-body" />
                      <span>角色管理</span>
                  </MenuItem>
                  <MenuItem name="1-2" to="/admin/user" v-if="showUser">
                      <Icon type="md-contacts" />
                      <span>用户管理</span>
                  </MenuItem>
                  <MenuItem name="1-3" to="/admin/equipment" v-if="showEquipment">
                      <Icon type="ios-construct" />
                      <span>器材管理</span>
                  </MenuItem>
                  <MenuItem name="1-4" to="/admin/material" v-if="showMaterial">
                      <Icon type="ios-flask" />
                      <span>材料管理</span>
                  </MenuItem>
                  <MenuItem name="1-5" to="/admin/experiment" v-if="showMemo">
                      <Icon type="ios-paper" />
                      <span>实验记录</span>
                  </MenuItem>
              </Menu>
            </div>
        </Layout>
    </Layout>
</template>

<script>
export default {
  name: 'Admin',
  data () {
    return {
      // authorities:[],//用户权限信息,
      // showRole:false,
      // showUser:false,
      // showEquipment:false,
      // showMaterial:false,
      // showMemo:false,
      showMenu:false,
    }
  },
  computed:{
    username(){
      return window.sessionStorage.getItem('username')
    },
    authorities(){
      let  temp = JSON.parse(window.sessionStorage.getItem('authorities'))
      let res = []
      for(let i = 0; i < temp.length; i++){
        res.push(JSON.parse(temp[i]))
      }
      return res
      // return this.$store.getters.getAuthorities
    },
    showRole(){
      let tag = false
      this.authorities.forEach(val => {
        if(val.authority == 'role:list'){
          tag = true
        }
      })
      return tag
    },
    showUser(){
      let tag = false
      this.authorities.forEach(val => {
        if(val.authority == 'user:list'){
          tag = true
        }
      })
      return tag
    },
    showEquipment(){
      let tag = false
      this.authorities.forEach(val => {
        if(val.authority == 'equipment:list'){
          tag = true
        }
      })
      return tag
    },
    showMaterial(){
      let tag = false
      this.authorities.forEach(val => {
        if(val.authority == 'material:list'){
          tag = true
        }
      })
      return tag
    },
    showMemo(){
      let tag = false
      this.authorities.forEach(val => {
        if(val.authority == 'experiment:list'){
          tag = true
        }
      })
      return tag
    },
    activeName(){
      if(this.showRole){
        this.$router.push('/admin/role')
        return '1-1'
      }else if(this.showUser){
        this.$router.push('/admin/user')
        return '1-2'
      }else if(this.showEquipment){
        this.$router.push('/admin/equipment')
        return '1-3'
      }else if(this.showMaterial){
        this.$router.push('/admin/material')
        return '1-4'
      }else if(this.showMemo){
        this.$router.push('/admin/experiment')
        return '1-5'
      }   
    }
  },
  created(){
    // this.authorities = this.$store.getters.getAuthorities

    // console.log(this.authorities)

    // this.authorities.forEach(val => {
    //   // console.log(val.authority)
    //   if(val.authority == 'role:list'){
    //     this.showRole = true
    //   }
    //   if(val.authority == 'user:list'){
    //     this.showUser = true
    //   }
    //   if(val.authority == 'equipment:list'){
    //     this.showEquipment = true
    //   }
    //   if(val.authority == 'material:list'){
    //     this.showMaterial = true
    //   }
    //   if(val.authority == 'memo:list'){
    //     this.showMemo = true
    //   } 
    // })
  },
  methods:{
    loginOut(){
      window.sessionStorage.clear()
      this.$router.push("/")
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /* 响应式 */
  /* pc样式 */
  @media screen and (min-width:960px){ 
    .phoneShow{
      display: none;
    }
    /* pc段无论什么情况都不会显示这个菜单 */
    .showMenu{
      display:none;
    }
  } 
  /* pad样式  */
  @media screen and (max-width:960px) and (min-width:750px){ 
    .ivu-layout-header{
      padding-left: 25px;
      padding-right: 25px;
    }
    .ivu-layout-sider{
      display: none;
    }
    .phoneShow{
      display: inline-block;
    }
  }   
  /* 手机端样式 */
  @media screen and (max-width:750px){ 
    .ivu-layout-header{
      padding-left: 10px;
      padding-right: 10px;
    }
    .ivu-layout-sider{
      display: none;
    }
    .pcShow{
      display: none;
    }
    .phoneShow{
      display: block;
    }
  } 
  .ivu-layout{
    height:100%;
    position: relative;
  }
  /* 头部 */
  .ivu-layout-header{
    color:#ccc;
    display:flex;
    justify-content: space-between;
  }
  .head_left{
    flex-grow:5;
  }
  .head_left h2{
    cursor:pointer;
    padding:0;
    margin:0;
  }
  .head_left span{
    margin-left:10px;
  }
  .head_right{
    flex-grow:1;
    font-size:16px;
  }
  .head_right ul{
    width:100%;
    display:flex;
    justify-content: space-between;
  }
  .head_right ul li{
    flex-grow: 1;
    text-align:right;
  }
  .head_right span{
    margin:0 6px;
  }
  .phoneShow{
    cursor: pointer;
  }
  /* 左边 */
  .ivu-layout-sider-children{
    color:#ccc

  }
  .menu-item span{
      display: inline-block;
      overflow: hidden;
      width: 69px;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: bottom;
      transition: width .2s ease .2s;
  }
  .menu-item i{
      transform: translateX(0px);
      transition: font-size .2s ease, transform .2s ease;
      vertical-align: middle;
      font-size: 16px;
  }
  .subMenu{
    position: absolute;
    left:0;
    top:0;
    width:100%;
  }
  .loginOut{
    cursor: pointer;
  }
</style>
